<template>
  <div class="hotel-order">
    <v-header ref="header" title="填写导游订购订单"></v-header>
    <div class="main" ref="main">
      <div class="hotel-wrapper">
        <div class="hotel-info">
          <div class="thumb" v-lazy:backgroundImage="selectedGuide.guide.imgUrl"></div>
          <div class="wrapper">
            <p class="name">{{selectedGuide.guide.tourName}} {{selectedGuide.guide.scenicNames}}</p>
            <p class="price">指导价格: <span>￥</span><span class="num">{{selectedGuide.guide.price}}</span></p>
          </div>
        </div>
      </div>

      <ul class="user-info">
        <li>
          <label>游玩日期</label>
          <datetime v-model="playDate"></datetime>
        </li>
        <li>
          <label>游玩人数</label>
          <x-input v-model="travelNumber"  placeholder="请输入游玩人数" required text-align="right" :show-clear="false"></x-input><span>人</span>
        </li>
        <li>
          <label>联系人姓名</label>
          <x-input v-model="username" placeholder="请输入联系人姓名" required text-align="right" :show-clear="false"></x-input>
        </li>
        <li>
          <label>联系人手机号</label>
          <x-input v-model="phoneNumber" type="tel" placeholder="请输入联系人手机号" is-type="china-mobile" required text-align="right" :show-clear="false"></x-input>
        </li>
      </ul>
    </div>
    <div class="bottom" :style="{paddingBottom: paddingBottom + 'px'}">
      <p class="left">
        <span class="type">总价格</span>
        ￥<span class="price">{{selectedGuide.guide.price}}</span>
      </p>
      <p class="right" @click="submitOrder">提交订单</p>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { TransferDom, Popup, InlineXNumber, XInput, Actionsheet, Datetime, XTextarea } from 'vux'

import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import { mapGetters } from 'vuex'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'HotelOrder',
  mixins: [handleBackMixin],
  data() {
    return {
      guideBackgroundImage: '',
      showSelectEnterTime: false,
      playDate: this.moment().format('YYYY-MM-DD'),
      ticketNumber: 1,
      username: localUser.get('realName') || localUser.get('nickname') || '',
      phoneNumber: localUser.get('phoneNum') || '',
      travelNumber: 1,
      allPopupModels: ['showSelectEnterTime']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Popup,
    InlineXNumber,
    XInput,
    Actionsheet,
    Datetime,
    XTextarea
  },
  computed: {
    totalPrice() {
      return parseFloat(this.selectedScenic.ticket.sellPrice * this.ticketNumber, 2)
    },
    ...mapGetters(['selectedScenic', 'selectedGuide'])
  },
  created() {
    console.log(this.selectedGuide)
    this.paddingBottom = 0
  },
  mounted() {
    this.$refs.main.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight - 44 - this.paddingBottom + 'px'
  },
  methods: {
    // 正则表达式判断输入是否为正整数
    isNumber (str) {
      var r = /^\+?[1-9][0-9]*$/
      return r.test(str)
    },
    submitOrder() {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      if (this.travelNumber === '') {
        this.$vux.toast.text('请输入游玩人数', 'middle')
        return
      }
      if (!this.isNumber(this.travelNumber)) {
        this.$vux.toast.text('请输入数字', 'middle')
        return
      }
      if (this.username === '') {
        this.$vux.toast.text('请填写联系人姓名', 'middle')
        return
      }
      if (this.phoneNumber === '') {
        this.$vux.toast.text('请填写联系人手机号', 'middle')
        return
      }
      const _self = this
      axios.post(_self, '/v1/createGuiderOrder/', {
        createBy: localUser.get('id'),
        goodsName: _self.selectedGuide.guide.tourName,
        goodsIntro: _self.selectedGuide.guide.desc,
        belongToGuiderId: _self.selectedGuide.guide.userId,
        belongToScenicId: _self.selectedScenic.scenic.id,
        goodsPrice: _self.selectedGuide.guide.price,
        tourTime: _self.playDate,
        tourPersonNum: _self.travelNumber,
        contractName: _self.username,
        phoneNum: _self.phoneNumber
      }, (data) => {
        // console.log(data)
        _self.$vux.toast.text('提交订单成功', 'middle')
        _self.$router.push(`/ScenicGuideOrderDetail/${data.outTradeNo}`)
      }, (err) => {
        _self.$vux.toast.text(err, 'middle')
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.hotel-order
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
.main
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
.hotel-wrapper
  background #ffffff
  box-shadow 0 0 10px #e0e0e0
  .hotel-info
    display flex
    padding 16px
    padding-left 0
    margin-left 16px
    border-bottom 1px solid #e2e2e2
    .thumb
      width 80px
      height 60px
      border-radius 3px
      background-size cover
      background-repeat no-repeat
      background-position center
      margin-right 8px
    .wrapper
      width calc(100% - 78px)
    .name
      height 44px
      font-size 17px
      color #333
      font-weight bold
      line-height 1.3
      no-wrap-n(2)
    .price
      font-size 13px
      color #999
      line-height 1
      span
        color $color-theme
      .num
        font-size 18px
.hotel-params
  display flex
  justify-content space-between
  align-items center
  height 48px
  line-height 48px
  padding 0 16px
  i
    font-size 18px
    color #999999
    margin-left 4px
    margin-right 16px
  .date-select
    display flex
    align-items center
    .date
      font-size 18px
      color #333333
    .date-str
      font-size 13px
      color #999999
      margin-left 8px
    .divider
      font-size 18px
      margin 0 8px
.user-info
  margin-top 20px
  background #ffffff
  padding 0 16px
  font-size 15px
  li
    display flex
    padding 12px 0
    justify-content space-between
    border-bottom 0.5px solid #e2e2e2
    &:last-child
      border-bottom none
    label
      color #666
    .right
      color #333
      font-size 15px
      i
        color #666
        margin-left 4px
    .tip
      color #999
.bottom
  height 44px
  line-height 44px
  display flex
  border-top 1px solid #e2e2e2
  box-shadow 0 0 10px #e0e0e0
  background #fff
  .left
    width 55%
    text-align center
    font-size 13px
    background #fff
    color $color-theme
    .type
      margin-right 8px
      color $color-level
    .price
      font-size 17px
  .right
    width 45%
    background $color-theme
    color #fff
    font-size 17px
    text-align center
.order-notice
  padding 20px 16px
  margin-top 20px
  font-size 13px
  color #999
  label
    color #000
    margin-right 4px
  .important
    background $color-theme
    padding 0 8px
    width fit-content
    color #fff
    font-size 13px
    height 20px
    line-height 20px
    border-radius 2px
    display inline-block
  .order-title
    font-size 16px
    line-height 1.1
    color #333
    margin-bottom 16px
    margin-top 8px
    position relative
    &:before
      content '*'
      color red
      display inline-block
      margin-right 6px
  .order-desc
    margin-bottom 32px
    li
      display flex
      margin-bottom 12px
      line-height 1.3
  .intro
    margin-bottom 32px
    li
      margin-bottom 12px
      line-height 1.3
</style>

<style>
.hotel-order .user-info .vux-x-input .weui-input {
  font-size: 15px;
}
.hotel-order .user-info .vux-number-input{
  font-size: 16px;
}
.hotel-order .user-info .weui-cell {
  padding: 0;
}
.hotel-order .user-info .weui-cell:before {
  display: none;
}
.hotel-order .user-info .vux-x-input::before {
  display: none;
}
.hotel-order .user-info .weui-cell__ft {
  color: #333;
  font-size: 15px;
}
</style>
